import { Provider } from 'mobx-react'
import React from 'react'
import { Form, Input, Tooltip, Icon,DatePicker,TimePicker, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
import MultiFileUpload from '../../common/multiFileUpload'
import {inject, observer} from "mobx-react/index";
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

@inject("store")
@observer
class NewRequires extends React.Component {
    state = {
        confirmDirty: false,
    };
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }

            const rangeTimeValue = values['rangeTime'];
            const fieldValues = {
                ...values,
                'serviceStartTime': rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
                'serviceEndTime': rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
                'bidEndTime':values['bidEndTime'].format('YYYY-MM-DD HH:mm:ss')
            };
            delete fieldValues.rangeTime
            console.log('Received values of form: ', fieldValues);
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    hasErrors = (fieldsError) => {
        console.log(Object.keys(fieldsError).some(field => fieldsError[field]))
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 18 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 8,
                    offset:4,
                },
            },
        };
        let store=this.props.store
        const serviceType=store.serviceType
        const requireNameError =  isFieldTouched('requireName') &&getFieldError('requireName');
        const serviceTypeError = isFieldTouched('serviceType')&&getFieldError('serviceType')
        const priceTypeError =  isFieldTouched('priceType') &&getFieldError('priceType');
        const servicePriceError =  isFieldTouched('servicePrice') &&getFieldError('servicePrice');
        const bidEndTimeError = isFieldTouched('bidEndTime') &&getFieldError('bidEndTime');
        const rangeTimeError =  isFieldTouched('rangeTime') &&getFieldError('rangeTime');
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem
                    {...formItemLayout}
                    label="需求标题"
                    validateStatus={requireNameError ? 'error' : ''}
                    help={requireNameError || ""}
                >
                    {getFieldDecorator('requireName', {
                        rules: [{ required: true, message: '请输入需求标题!', whitespace: false }],
                    })(
                        <Input  onBlur={this.handleConfirmBlur}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="服务类型"
                    validateStatus={serviceTypeError ? 'error' : ''}
                    help={serviceTypeError || ""}
                >
                    {getFieldDecorator('serviceType', {
                        rules: [{ required: true, message: '请输入服务类型!' }],
                    })(
                        <Select>
                            { serviceType.map((item) =>
                                <Option value={item.id}>{item.name}</Option>
                             ) }
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="项目预算"
                    validateStatus={priceTypeError ? 'error' : ''}
                    help={priceTypeError || ""}
                >
                    {getFieldDecorator('priceType', {
                        rules: [{ required: true, message: '请选择预算类型!', whitespace: false }],
                    })(
                    <Select defaultValue="true" style={{ width: 120 }} onChange={(value)=>store.actions.changeMoneyDisplay(value,this.props.form)}>
                        <Option value="true">填写预算价格</Option>
                        <Option value="false">服务商报价</Option>
                    </Select>
                    )}
                </FormItem>
                {store.moneyDisplay==="true"?<FormItem
                    {...formItemLayout}
                    label="预算金额"
                    validateStatus={servicePriceError ? 'error' : ''}
                    help={servicePriceError || ""}
                >
                    {getFieldDecorator('servicePrice', {
                        rules: [{ required: store.moneyDisplay==="true", message: '请输入预算！' }],
                    })(
                        <Input placeholder={"请输入预算！"} onBlur={this.handleConfirmBlur} />
                    )}
                </FormItem>:""}
                <FormItem
                    {...formItemLayout}
                    label="招标结束时间"
                    validateStatus={bidEndTimeError ? 'error' : ''}
                    help={bidEndTimeError || ""}
                >
                    {getFieldDecorator('bidEndTime', {
                        rules: [{ type: 'object', required: true, message: '请输入招标结束日期!' }],
                    })(
                        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="服务时间"
                    validateStatus={rangeTimeError ? 'error' : ''}
                    help={rangeTimeError || ""}
                >
                    {getFieldDecorator('rangeTime', {
                        rules: [{ type: 'array', required: true, message: '请输入服务时间!' }],
                    })(
                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    )}
                </FormItem>
                <Provider store = { this.props.store } ><MultiFileUpload alt="需求附件"/></Provider>
                <FormItem {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit" disabled={this.hasErrors(getFieldsError())}>立即创建</Button>
                </FormItem>
            </Form>
        );
    }
}
const NewRequire = Form.create()(NewRequires);
export default NewRequire